<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<base href="<%=basePath%>">
	<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
	<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
	<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
	<script type="text/javascript">

		//页面加载完毕
		$(function(){
			pageList();
			$("#qx").click(function () {

				$("input[name=xz]").prop("checked",this.checked);

			})
			$("#dicTypeBody").on("click",$("input[name=xz]"),function () {

				$("#qx").prop("checked",$("input[name=xz]").length==$("input[name=xz]:checked").length);

			})

			$("#saveBtn").click(function () {

				$.ajax({

					url : "settings/user/save.do",
					data : {

						"code" : $.trim($("#create-code").val()),
						"name" : $.trim($("#create-name").val()),
						"description" : $.trim($("#create-description").val()),
						"typeDic" : "dicType"

					},
					type : "post",
					dataType : "json",
					success : function (data) {

						if(data.success){

							pageList();

							$("#dicTypeAddForm")[0].reset();
							//关闭模态窗口
							$("#createDicTypeModal").modal("hide");

						}else{

							alert("添加字典类型失败");

						}

					}

				})

			})

			//为删除按钮绑定事件，执行删除操作
			$("#deleteBtn").click(function () {

				//找到复选框中所有挑√的复选框的jquery对象
				var $xz = $("input[name=xz]:checked");

				if($xz.length==0){

					alert("请选择需要删除的记录");

					//肯定选了，而且有可能是1条，有可能是多条
				}else{


					if(confirm("确定删除所选中的记录吗？")){

						//拼接参数
						var param = "";

						//将$xz中的每一个dom对象遍历出来，取其value值，就相当于取得了需要删除的记录的id
						for(var i=0;i<$xz.length;i++){

							param += "code="+$($xz[i]).val();

							//如果不是最后一个元素，需要在后面追加一个&符
							if(i<$xz.length-1){

								param += "&";

							}

						}
						$.ajax({

							url : "settings/user/deleteByIds.do",
							data : param,
							type : "post",
							dataType : "json",
							success : function (data) {

								if(data.success){

									pageList();

								}else{

									alert("删除字典类型失败");

								}


							}

						})


					}




				}


			})

			//为修改按钮绑定事件，打开修改操作的模态窗口
			$("#editBtn").click(function () {

				var $xz = $("input[name=xz]:checked");

				if($xz.length==0){

					alert("请选择需要修改的记录");

				}else if($xz.length>1){

					alert("只能选择一条记录进行修改");

					//肯定只选了一条
				}else{

					var code = $xz.val();

					$.ajax({

						url : "settings/user/getDicType.do",
						data : {

							"code" : code,
							"typeDic": "dicType"
						},
						type : "get",
						dataType : "json",
						success : function (data) {

							//处理单条
							$("#edit-code").val(data.dt.code);
							$("#edit-name").val(data.dt.name);
							$("#edit-description").val(data.dt.description);

							//所有的值都填写好之后，打开修改操作的模态窗口
							$("#editDicTypeModal").modal("show");

						}

					})

				}

			})

			//为更新按钮绑定事件，执行字典类型的修改操作
			$("#updateBtn").click(function () {

				$.ajax({

					url : "settings/user/update.do",
					data : {

						"code" : $.trim($("#edit-code").val()),
						"name" : $.trim($("#edit-name").val()),
						"description" : $.trim($("#edit-description").val()),
						"typeDic" : "dicType"

					},
					type : "post",
					dataType : "json",
					success : function (data) {

						if(data.success){

							pageList();

							//关闭修改操作的模态窗口
							$("#editDicTypeModal").modal("hide");

						}else{

							alert("修改字典类型失败");

						}

					}

				})

			})
		});

		function pageList() {

			$("#qx").prop("checked",false);

			$.ajax({

				url : "settings/user/typeList.do",
				data : {

					"typeCode" : "dicType"

				},
				type : "get",
				dataType : "json",
				success : function (data) {
					var html = "";

					//每一个n就是每一个市场活动对象
					$.each(data, function (i, n) {

						html += '<tr class="active">';
						html += '<td><input type="checkbox" name="xz" value="' + n.code + '"/></td>';
						html += '<td>' + (i+1) + '</td>';
						html += '<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href=\'settings/user/typeList.do?typeCode='+n.code+'\';">'+n.code+'</a></td>';
						html += '<td>' + n.name + '</td>';
						html += '<td>' + n.description + '</td>';
						html += '</tr>';
					})

					$("#dicTypeBody").html(html);
				}

			})

		}
	</script>
</head>
<body>
	<!-- 创建字典类型的模态窗口 -->
	<div class="modal fade" id="createDicTypeModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">×</span>
				</button>
				<h4 class="modal-title" id="myModalLabel1">新增字典类型</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal" role="form" id="dicTypeAddForm">

					<div class="form-group">
						<label for="create-code" class="col-sm-2 control-label">编码<span style="font-size: 15px; color: red;">*</span></label>
						<div class="col-sm-10" style="width: 300px;">
							<input type="text" class="form-control" id="create-code" style="width: 200%;" placeholder="编码作为主键，不能是中文">
						</div>
					</div>

					<div class="form-group">
						<label for="create-name" class="col-sm-2 control-label">名称</label>
						<div class="col-sm-10" style="width: 300px;">
							<input type="text" class="form-control" id="create-name" style="width: 200%;">
						</div>
					</div>

					<div class="form-group">
						<label for="create-description" class="col-sm-2 control-label">描述</label>
						<div class="col-sm-10" style="width: 300px;">
							<textarea class="form-control" rows="3" id="create-description" style="width: 200%;"></textarea>
						</div>
					</div>
				</form>

			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary" id="saveBtn">保存</button>
			</div>
		</div>
	</div>
	</div>

	<!-- 修改字典类型的模态窗口 -->
	<div class="modal fade" id="editDicTypeModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel2">修改字典类型</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" role="form">

						<div class="form-group">
							<label for="edit-code" class="col-sm-2 control-label">编码<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-code" style="width: 200%;" placeholder="编码作为主键，不能是中文">
							</div>
						</div>

						<div class="form-group">
							<label for="edit-name" class="col-sm-2 control-label">名称</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-name" style="width: 200%;">
							</div>
						</div>

						<div class="form-group">
							<label for="edit-description" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 300px;">
								<textarea class="form-control" rows="3" id="edit-description" style="width: 200%;"></textarea>
							</div>
						</div>
					</form>

				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="updateBtn">更新</button>
				</div>
			</div>
		</div>
	</div>

	<div>
		<div style="position: relative; left: 30px; top: -10px;">
			<div class="page-header">
				<h3>字典类型列表</h3>
			</div>
		</div>
	</div>
	<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;left: 30px;">
		<div class="btn-group" style="position: relative; top: 18%;">
		  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#createDicTypeModal"><span class="glyphicon glyphicon-plus"></span> 创建</button>
		  <button type="button" class="btn btn-default" id="editBtn"><span class="glyphicon glyphicon-edit"></span> 编辑</button>
		  <button type="button" class="btn btn-danger" id="deleteBtn"><span class="glyphicon glyphicon-minus"></span> 删除</button>
		</div>
	</div>
	<div style="position: relative; left: 30px; top: 20px;">
		<table class="table table-hover">
			<thead>
				<tr style="color: #B3B3B3;">
					<td><input type="checkbox"  id="qx"/></td>
					<td>序号</td>
					<td>编码</td>
					<td>名称</td>
					<td>描述</td>
				</tr>
			</thead>
			<tbody id="dicTypeBody">

				<%--<c:forEach items="${dtList}" var="dtl" varStatus="status">
					<tr class="active">
						<td><input type="checkbox" /></td>
						<td>${requestScope.offset+status.index+1}</td>
						<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='settings/user/typeList.do?typeCode=${dtl.code}';">${dtl.code}</a></td>
						<td>${dtl.name}</td>
						<td>${dtl.description}</td>
					</tr>
				</c:forEach>--%>

			</tbody>
		</table>
	</div>
	
</body>
</html>